<template>
	<view class="gas-station-page">
		<!-- 顶部导航栏 -->
		<CustomNavbar>
			<view class="navbar-content">
				<view class="nav-left" @click="goBack">
					<text class="back-icon">‹</text>
				</view>
				<view class="nav-title">就近加油</view>
				<view class="nav-right">
					<text class="nav-icon">⋯</text>
					<text class="nav-icon-target">◎</text>
				</view>
			</view>
		</CustomNavbar>
		<view class="main">
			<!-- 搜索和模式切换区域 -->
			<view class="search-section">
				<view class="search-bar">
					<input class="search-input" v-model="searchKeyword" placeholder="输入需要搜索的内容" />
					<view class="search-icon">Q</view>
				</view>
				<view class="mode-btn" @click="toggleMode">
					{{ isMapMode ? '列表模式' : '地图模式' }}
				</view>
			</view>

			<!-- 油品类型筛选 -->
			<view class="filter-section">
				<view class="filter-item" v-for="(fuel, index) in fuelTypes" :key="index"
					:class="{ 'filter-active': selectedFuel === fuel }" @click="selectFuel(fuel)">
					{{ fuel }}
				</view>
			</view>

			<!-- 列表模式 -->
			<view class="list-container" v-if="!isMapMode">
				<view class="station-list">
					<view class="station-item" v-for="(station, index) in stationList" :key="index">
						<view class="station-header">
							<text class="station-name">{{ station.name }}</text>
							<text class="station-distance">{{ station.distance }}</text>
						</view>
						<view class="station-discounts" v-if="station.discounts && station.discounts.length > 0">
							<text class="discount-tag" v-for="(discount, idx) in station.discounts"
								:key="idx">{{ discount }}</text>
						</view>
						<view class="station-content">
							<image :src="station.image" class="station-image" mode="aspectFill" />
							<view class="station-info">
								<text class="station-hours">{{ station.hours }}</text>
								<text class="station-price">¥ {{ station.price }}/升</text>
								<view class="station-address-row">
									<text class="station-address">{{ station.address }}</text>
									<view class="station-actions">
										<text class="nav-icon-small" @click.stop="goToNav(station)">✈</text>
										<text class="detail-link" @click.stop="goToDetail(station)">详情</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 地图模式 -->
			<view class="map-container" v-if="isMapMode">
				<map class="map-view" :latitude="currentLatitude" :longitude="currentLongitude" :markers="mapMarkers"
					:scale="15" show-location @markertap="onMarkerTap">
				</map>
				<!-- 附近门店按钮 -->
				<view class="nearby-stores-btn" @click="toggleMode">
					<text>附近门店 ></text>
				</view>
				<!-- 底部信息卡片 -->
				<view class="map-info-card" v-if="selectedStation">
					<view class="card-header">
						<text class="card-title">{{ selectedStation.name }}</text>
						<image :src="selectedStation.image" class="card-image" mode="aspectFill" />
					</view>
					<text class="card-address">{{ selectedStation.address }}</text>
					<view class="card-detail-link" @click="goToDetail(selectedStation)">
						<text class="detail-icon">①</text>
						<text>门店详情>></text>
					</view>
					<button class="nav-btn" @click="goToNav(selectedStation)">立即导航</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad,
		onUnload
	} from '@dcloudio/uni-app'
	import CustomNavbar from '@/components/CustomNavbar.vue'
	import {
		getLocation
	} from '@/utils/location.js'

	// 从存储中获取位置信息
	const getLocationFromStorage = () => {
		return getLocation()
	}

	// 页面参数
	const currentLatitude = ref(34.825817)
	const currentLongitude = ref(113.55852)
	const address = ref('')

	// 模式切换
	const isMapMode = ref(false)
	const searchKeyword = ref('')

	// 油品类型
	const fuelTypes = ref(['90#', '92#', '93#', '95#', '97#', '98#'])
	const selectedFuel = ref('')

	// 选中的加油站
	const selectedStation = ref(null)

	// 加油站列表数据
	const stationList = ref([{
			id: 1,
			name: '中国石油加油站',
			distance: '556m',
			discounts: ['满200减20', '满500减60'],
			hours: '营业时间: 周一至周五',
			price: '5.66',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/10011.jpg',
			latitude: 34.825817,
			longitude: 113.55852
		},
		{
			id: 2,
			name: '中国石油加油站',
			distance: '880m',
			discounts: ['满200减20', '满500减60'],
			hours: '营业时间: 周一至周五',
			price: '5.66',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/10015.jpg',
			latitude: 34.826817,
			longitude: 113.55952
		},
		{
			id: 3,
			name: '中国石油加油站',
			distance: '1.2km',
			discounts: ['满200减20'],
			hours: '营业时间: 周一至周五',
			price: '5.66',
			address: '山阳区人民路与解放路交叉口',
			image: '/static/10040.jpg',
			latitude: 34.827817,
			longitude: 113.56052
		}
	])

	// 地图标记点
	const mapMarkers = ref([])

	// 页面加载
	onLoad((options) => {
		// 优先从存储中获取位置信息
		const savedLocation = getLocationFromStorage()
		if (savedLocation) {
			currentLatitude.value = savedLocation.latitude
			currentLongitude.value = savedLocation.longitude
			if (savedLocation.address) {
				address.value = savedLocation.address
			} else if (savedLocation.city) {
				address.value = savedLocation.city
			}
		} else {
			// 如果没有存储的位置，尝试从参数获取
			if (options.address) {
				address.value = decodeURIComponent(options.address)
			}
			if (options.latitude) {
				currentLatitude.value = parseFloat(options.latitude)
			}
			if (options.longitude) {
				currentLongitude.value = parseFloat(options.longitude)
			}
		}

		updateMapMarkers()

		// 监听位置更新事件
		uni.$on('locationUpdated', (locationData) => {
			if (locationData) {
				currentLatitude.value = locationData.latitude
				currentLongitude.value = locationData.longitude
				if (locationData.address) {
					address.value = locationData.address
				} else if (locationData.city) {
					address.value = locationData.city
				}
				updateMapMarkers()
			}
		})
	})

	// 页面卸载
	onUnload(() => {
		// 移除事件监听
		uni.$off('locationUpdated')
	})

	// 更新地图标记点
	const updateMapMarkers = () => {
		const markers = []

		// 添加当前位置标记
		markers.push({
			id: 0,
			latitude: currentLatitude.value,
			longitude: currentLongitude.value,
			iconPath: '/static/10090.ico',
			width: 30,
			height: 30,
			title: '我的位置'
		})

		// 添加加油站标记
		const stationMarkers = stationList.value.map((station) => ({
			id: station.id,
			latitude: station.latitude,
			longitude: station.longitude,
			iconPath: '/static/10090.ico',
			width: 30,
			height: 30,
			callout: {
				content: station.name,
				color: '#333',
				fontSize: 14,
				borderRadius: 5,
				bgColor: '#fff',
				padding: 5,
				display: 'BYCLICK'
			}
		}))

		mapMarkers.value = markers.concat(stationMarkers)
	}

	// 切换模式
	const toggleMode = () => {
		isMapMode.value = !isMapMode.value
		if (isMapMode.value && stationList.value.length > 0 && !selectedStation.value) {
			selectedStation.value = stationList.value[0]
		}
	}

	// 选择油品类型
	const selectFuel = (fuel) => {
		selectedFuel.value = selectedFuel.value === fuel ? '' : fuel
		// 这里可以根据选择的油品类型筛选加油站
	}

	// 选择加油站
	const selectStation = (station) => {
		selectedStation.value = station
		currentLatitude.value = station.latitude
		currentLongitude.value = station.longitude
		updateMapMarkers()
	}

	// 地图标记点击
	const onMarkerTap = (e) => {
		const markerId = e.detail.markerId
		const station = stationList.value.find(s => s.id === markerId)
		if (station) {
			selectStation(station)
		}
	}

	// 返回
	const goBack = () => {
		uni.navigateBack()
	}

	// 跳转到导航页面
	const goToNav = (station) => {
		uni.navigateTo({
			url: `/pages/index/GasStation/GasStationNav/GasStationNav?stationId=${station.id}&latitude=${station.latitude}&longitude=${station.longitude}&address=${encodeURIComponent(station.address)}&name=${encodeURIComponent(station.name)}`
		})
	}

	// 跳转到详情页面
	const goToDetail = (station) => {
		uni.navigateTo({
			url: `/pages/index/GasStation/GasStationPage/GasStationPage?stationId=${station.id}`
		})
	}
</script>

<style scoped>
	.gas-station-page {
		min-height: 100vh;
		background-color: #f5f5f5;
	}


	.main {
		position: absolute;
		top: 200rpx;
		width: 100%;
	}

	/* 导航栏样式 */
	::v-deep .custom-navbar {
		background: linear-gradient(135deg, #2575fc, #6a11cb) !important;
	}

	.navbar-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		position: relative;
	}

	.nav-left {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 60rpx;
		height: 88rpx;
	}

	.back-icon {
		color: #fff;
		font-size: 56rpx;
		font-weight: 300;
		line-height: 88rpx;
		transform: scaleY(1.3);
	}

	.nav-title {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		color: #fff;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 88rpx;
	}

	.nav-right {
		display: flex;
		align-items: center;
		gap: 30rpx;
	}

	.nav-icon {
		color: #fff;
		font-size: 36rpx;
	}

	.nav-icon-target {
		color: #fff;
		font-size: 32rpx;
	}

	/* 搜索区域 */
	.search-section {
		/* background: linear-gradient(135deg, #2575fc, #6a11cb); */
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.search-bar {
		flex: 1;
		background-color: #fff;
		border-radius: 40rpx;
		height: 70rpx;
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.search-input {
		flex: 1;
		height: 70rpx;
		font-size: 28rpx;
		color: #333;
	}

	.search-icon {
		font-size: 32rpx;
		color: #999;
		margin-left: 10rpx;
	}

	.mode-btn {
		background-color: #ff8c00;
		color: #fff;
		padding: 0 20rpx;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		font-size: 26rpx;
		white-space: nowrap;
	}

	/* 筛选区域 */
	.filter-section {
		/* background-color: #fff; */
		padding: 20rpx 30rpx;
		display: flex;
		gap: 20rpx;
		flex-wrap: wrap;
	}

	.filter-item {
		padding: 10rpx 20rpx;
		background-color: #fff;
		border: 2rpx solid #e5e5e5;
		border-radius: 30rpx;
		font-size: 26rpx;
		color: #333;
	}

	.filter-active {
		background-color: #2575fc;
		color: #fff;
		border-color: #2575fc;
	}

	/* 列表容器 */
	.list-container {
		flex: 1;
		padding: 20rpx;
	}

	.station-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.station-item {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
	}

	.station-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.station-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.station-distance {
		font-size: 28rpx;
		color: #2575fc;
	}

	.station-discounts {
		display: flex;
		gap: 10rpx;
		margin-bottom: 15rpx;
		flex-wrap: wrap;
	}

	.discount-tag {
		padding: 5rpx 15rpx;
		border: 2rpx solid #ff8c00;
		border-radius: 20rpx;
		font-size: 22rpx;
		color: #ff8c00;
	}

	.station-content {
		display: flex;
		gap: 20rpx;
	}

	.station-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
	}

	.station-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.station-hours {
		font-size: 24rpx;
		color: #666;
	}

	.station-price {
		font-size: 28rpx;
		color: #ff8c00;
		font-weight: bold;
	}

	.station-address-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.station-address {
		font-size: 24rpx;
		color: #666;
		flex: 1;
	}

	.station-actions {
		display: flex;
		align-items: center;
		gap: 15rpx;
	}

	.nav-icon-small {
		font-size: 28rpx;
		color: #2575fc;
	}

	.detail-link {
		font-size: 24rpx;
		color: #2575fc;
	}

	/* 地图容器 */
	.map-container {
		position: relative;
		width: 100%;
		height: calc(100vh - 400rpx);
	}

	.map-view {
		width: 100%;
		height: 100%;
	}

	.nearby-stores-btn {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		background-color: #ff8c00;
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		font-size: 24rpx;
		z-index: 10;
	}

	.map-info-card {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		padding: 30rpx;
		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.1);
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-bottom: 15rpx;
	}

	.card-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
	}

	.card-image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 10rpx;
		margin-left: 20rpx;
	}

	.card-address {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 15rpx;
		display: block;
	}

	.card-detail-link {
		display: flex;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 20rpx;
		font-size: 24rpx;
		color: #2575fc;
	}

	.detail-icon {
		font-size: 28rpx;
	}

	.nav-btn {
		width: 100%;
		height: 80rpx;
		background-color: #2575fc;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
		border: none;
		line-height: 80rpx;
		text-align: center;
	}
</style>